import React, {useState, useEffect} from 'react'
import {View, Text, Image, ScrollView} from '@tarojs/components'

import LeftNavigation from '../../ification/ificationdetails/leftNavigation'
import store from "../../../store";

function hotGoods() {
  // 左侧数据
  const [leftNavList, useLeftNavList] = useState(
    [
      {leftText:'牛奶/面包', id:1},
      {leftText:'蔬菜', id:2},
      {leftText:'肉禽蛋', id:3},
      {leftText:'海鲜水产', id:4},
      {leftText:'粮油调味', id:5},
      {leftText:'火锅季', id:6},
      {leftText:'方便菜', id:7},
    ]
  )
  const [navListIndex,useNavListIndex] = useState(store.getState().navListIndex)
  // 右侧数据
  const [commList,useCommList] = useState([
    {
      tit: '鲜牛奶', describe: '备注等信息备注等信息备注等信息备注等信息备注等信息',
      img: require('../../../static/images/moguj.png'),new_price:'666',old_price:'888',
      commNum: 0,
      showMoveTag: false
    },
    {
      tit: '鲜牛奶', describe: '备注等信息备注等信息备注等信息备注等信息备注等信息',
      img: require('../../../static/images/moguj.png'),new_price:'666',old_price:'888',
      commNum: 0, showMoveTag: false
    },
    {
      tit: '鲜牛奶', describe: '备注等信息备注等信息备注等信息备注等信息备注等信息',
      img: require('../../../static/images/moguj.png'),new_price:'666',old_price:'888',
      commNum: 0, showMoveTag: false
    },
    {
      tit: '鲜牛奶', describe: '备注等信息备注等信息备注等信息备注等信息备注等信息',
      img: require('../../../static/images/moguj.png'),new_price:'666',old_price:'888',
      commNum: 0, showMoveTag: false
    }
  ])
  // 添加到购物车
  function addCommBtn(e,index){
    e.stopPropagation()
    const newCommList = [...commList]
    newCommList[index].commNum += 1
    newCommList[index].showMoveTag = true
    useCommList(newCommList)
  }
  // 减少数量
  function reduceNum(e,index){
    e.stopPropagation()
    const newCommList = [...commList]
    if(newCommList[index].commNum === 1){
      newCommList[index].showMoveTag = false
      newCommList[index].commNum = 0
    } else {
      newCommList[index].commNum -= 1
    }
    useCommList(newCommList)
  }
  // 声明改变数据的方法
  function storeChange(){
    useNavListIndex(store.getState().navListIndex)
  }
  function changeNavIndex(index){
    const action = {
      type:'change_if_nav',
      index
    }
    store.dispatch(action)
  }
  return (
    <View className='hot_goods'>
      <View className='goods_title'>
        <Text>热销商品</Text>
      </View>

      <View className='goods_list'>
        <ScrollView
          scrollY
          className='left_navigation'>
          {
            leftNavList.map((item,index) => {
              return (
                <View className={`nav_item ${index === navListIndex? 'is_show_left_nav':''}`} key={index} onClick={() => {changeNavIndex(index)}}>
                  <Text className='nav_item_te'>{item.leftText}</Text>
                </View>
              )
            })
          }
        </ScrollView>
        {/*下方商品列表详情*/}
        <ScrollView scrollY className='details_if_list'>
          {
            commList.map((item,index) => {
              return (
                <View className='details_if_items' onClick={() => {goToCommdetail()}}>
                  <View className='item_fl'>
                    <Image src={item.img} />
                  </View>
                  <View className='item_fr'>
                    <Text className='item_fr_tit'>{item.tit}</Text>
                    <Text className='item_fr_con'>{item.describe}</Text>
                    <View className='item_fr_tag'>
                      <Text>折扣</Text>
                    </View>
                    {/*onClick={(e) => e.stopPropagation()}*/}
                    <View className='item_fr_boo'>
                      <Text className='new_price'>￥{item.new_price}</Text>
                      <Text className='old_price'>￥{item.old_price}</Text>
                      <View className='comm_de_fr'>
                        <Text className={['reduce_comm_btn', item.showMoveTag? 'move_tag':'no_move_tag']} onClick={(e) => reduceNum(e,index)}>-</Text>
                        <Text className={item.showMoveTag? 'move_tag':'no_move_tag'}>{item.commNum}</Text>
                        <Text className='add_comm_btn' onClick={(e) => addCommBtn(e,index)}>+</Text>
                      </View>
                    </View>
                  </View>
                </View>
              )
            })
          }

        </ScrollView>
      </View>
    </View>
  )
}

export default hotGoods
